<template>
  <div class="main-box">
    <!-- <div class="search">
      <el-form ref="searchForm" :model="searchForm" inline>
        <el-form-item label="帐号名称：">
          <el-input v-model="searchForm.account" placeholder="请输入帐号名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="searchbtn" @click="search(searchForm)">查询</el-button>
          <el-button @click="reset(searchForm)">{{$t('重置')}}</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <el-button type="primary" style="margin-bottom: 16px" icon="el-icon-plus" @click="open">
      {{ $t('新增管理员') }}
    </el-button>
    <BaseTable :request="request" ref="baseTable">
      <el-table-column prop="id" label="ID" width="120px" />
      <el-table-column prop="account" :label="$t('账号')" />
      <el-table-column prop="name" :label="$t('昵称')" />
      <el-table-column prop="accountsState" :label="$t('账号状态')" width="200px">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" :active-text="$t('正常')"
            :inactive-text="$t('禁用')" active-color="var(--huocms-com-color-primary)" inactive-color="rgba(0,0,0,0.2)"
            :disabled="scope.row.group == 1 ? true : false" @change="disableUser(scope.row)" />
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="role"
        label="角色"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.role }}
          </span>
        </template>
      </el-table-column> -->
      <el-table-column :label="$t('操作')" width="100px" align="right" fixed="right">
        <template slot-scope="scope">
          <span v-if="scope.row.group == 1">/</span>
          <span v-else>
            <EditBtn @click="goEdit(scope.row)" />
            <DelBtn @success="goDel(scope.row)" :confirm-content="$t('删除该管理员')" />
          </span>
        </template>
      </el-table-column>
    </BaseTable>
    <BaseDialog :title="adminForm.id ? $t('编辑管理员') : $t('添加管理员')" :dialog-show.sync="dialogAdmin" width="50%" footer
      @submit="submitAdmin">
      <el-form ref="adminForm" :model="adminForm" :rules="adminRules" label-position="top">
        <el-form-item :label="`${$t('账号')}：`" prop="account">
          <el-input v-model="adminForm.account" :placeholder="$t('请依照这种格式')" />
        </el-form-item>
        <el-form-item :label="`${$t('密码')}：`" :prop="adminForm.id ? '' : 'password'">
          <el-input v-model="adminForm.password" type="password" />
        </el-form-item>
        <el-form-item :label="`${$t('昵称')}：`" prop="name">
          <el-input v-model="adminForm.name" />
        </el-form-item>
        <el-form-item :label="`${$t('角色')}：`" prop="role">
          <el-select v-model="adminForm.role" multiple :placeholder="$t('请选择角色')" style="width: 100%">
            <el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label="`${$t('状态')}：`">
          <el-select v-model="adminForm.status">
            <el-option :label="$t('启用')" :value="1" />
            <el-option :label="$t('禁用')" :value="2" />
          </el-select>
        </el-form-item>
      </el-form>
    </BaseDialog>
  </div>
</template>
<script>
import adminApi from '@/api/admin.js'
export default {
  data() {
    return {
      request: adminApi.adminList,
      tableData: [],
      searchForm: {},
      dialogAdmin: false,
      options: [], // 角色
      name: '', // 暂存管理员姓名
      adminForm: {
        account: '',
        password: '',
        name: '',
        role: [],
        id: ''
      }, // 新增管理员表单
      adminRules: {
        account: [
          {
            required: true,
            message: this.$t('请输入管理员账号'),
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: this.$t('请输入密码'), trigger: 'blur' }
        ],
        name: [
          { required: true, message: this.$t('请输入昵称'), trigger: 'blur' }
        ],
        role: [
          { required: true, message: this.$t('请选择角色'), trigger: 'change' }
        ]
      }
    }
  },
  created() {
    // this.getList()
  },
  methods: {
    disableUser(row) {
      adminApi.adminInfo({ id: row.id }).then(res => {
        const admin = res.data

        const roles = []
        admin.role.forEach(el => {
          roles.push(el.id)
        })
        this.adminForm = {
          name: admin.name,
          account: admin.account,
          id: admin.id,
          status: row.status,
          role: roles
        }
        adminApi.adminUpdate(this.adminForm).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
          }
        })
      })
    },

    // 获取管理员列表
    getList(type) {
      this.$refs.baseTable.getList(type)
    },
    // 获取角色列表
    getRolesList() {
      adminApi.roleList().then(res => {
        // 不展示超级管理员角色 role_id = 1
        const list = res.data
        list.forEach((res, index) => {
          if (res.id == 1) {
            list.splice(index, 1)
          }
        })
        this.options = list
      })
    },
    // 新增
    open() {
      this.dialogAdmin = true
      this.getRolesList()
      this.adminForm = {
        account: '',
        password: '',
        name: '',
        role: [],
        id: '',
        status: 1
      }
    },
    // 管理员详情
    getAdminInfo(row) {
      adminApi.adminInfo({ id: row.id }).then(res => {
        const admin = res.data
        const roles = []
        admin.role.forEach(el => {
          roles.push(el.id)
        })

        this.adminForm = {
          name: admin.name,
          account: admin.account,
          id: admin.id,
          status: admin.status,
          role: roles
        }

        this.dialogAdmin = true
      })
    },
    // 编辑
    goEdit(row) {
      this.getRolesList()
      this.getAdminInfo(row)
    },
    // 提交
    submitAdmin() {
      this.$refs.adminForm.validate(valid => {
        if (valid) {
          if (!this.adminForm.id) {
            adminApi
              .adminSave({
                ...this.adminForm
              })
              .then(res => {
                if (res.code === 0) {
                  this.$message.success(res.msg)
                  this.dialogAdmin = false
                  this.getList('search')
                }
              })
          } else {
            adminApi.adminUpdate({ ...this.adminForm }).then(res => {
              if (res.code === 0) {
                this.$message.success(res.msg)
                this.dialogAdmin = false
                this.getList()
              }
            })
          }
        } else {
          this.$message.warning(this.$t('请填写必要信息'))
        }
      })
    },

    // 删除
    goDel(row) {
      adminApi.adminDelete({ id: row.id }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.getList('search')
        }
      })
    },
    // 搜索
    search() {
      this.$refs.searchForm.validate(valid => {
        this.page.currentPage = 1
        this.getList('search')
      })
    },

    // 重置搜索框
    reset(searchForm) {
      this.searchForm = {
        account: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main-box {
  .el-form-item__content {
    .el-select {
      width: calc(100%);
    }
  }
}

.el-table {
  margin-bottom: 20px;
}
</style>
